<template>
  <div class="eleType">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>{{ isEdit ? '修改电梯类型' : '添加电梯类型' }}</div>
        <i class="el-icon-close" @click="handleCloseDialog" />
      </div>

      <div class="eleType-main">
        <div class="con flexdc flexcenter">
          <div class="con-row m-t-40">
            <div class="flex flexac">
              <span class="name"><span class="mustval">*</span>电梯类型：</span>
              <div class="pre">
                <el-input v-model="data.name" class="type-input" placeholder="请输入电梯类型..." />
              </div>
            </div>
          </div>
          <div class="con-row">
            <div class="flex flexac m-t-20">
              <span class="area-name">备注：</span>
              <el-input
                v-model="data.remark"
                :autosize="{ minRows: 4, maxRows: 5}"
                resize="none"
                type="textarea"
                class="area-input"
                placeholder="请输入备注信息..."
              />
            </div>
          </div>
        </div>

        <div class="flexcenter  footerBtn m-t-50">
          <el-button v-if="!isEdit" class="saveBtn m-r-30 btn el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
          <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
          <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { createTypeAdd, updateTypeArticle } from '@/api/elevator/elevatorType'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'ElevatorType',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  watch: {
    editFactory: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  },
  created() {},
  methods: {
    handleSave(type) {
      if (!(/^\S+$/.test(this.data.name))) {
        showNotice('error', '提示', '请输入电梯类型')
        return
      }
      if (type === 0) {
        this.handleCreateAdd(this.data)
      } else {
        this.handleUpdate(this.data)
      }
    },
    // 修改电梯类型
    handleUpdate(data) {
      updateTypeArticle(data).then((res) => {
        if (this.data !== '') {
          showNotice('success', '提示', '更新成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          showNotice('error', '提示', '更新失败')
          return false
        }
      })
    },
    // 新增电梯类型
    handleCreateAdd(data) {
      createTypeAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }
      })
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import '@/styles/public.scss';
.eleType {
  width: 600px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin: 0 auto;
  .panelWrap {
    min-height: 400px;
    .eleType-main {
      .con {
        .con-row {
          padding: 10px 0 0 0;
          .name {
            margin-left: -40px;
          }
          .type-input {
            width: 266px;
          }
          .area-name {
            margin-top: -66px;
          }
          .area-input {
            width: 266px;
          }
          .el-textarea__inner {
            padding: 5px 0;
          }
        }
      }
      .footerBtn {
        .btn {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
}

</style>
